<template>
  <div class="right hh-login" style="background: none;height: auto">
    <h3 class="call" style="margin-top: 0;font-size: 20px">来电中心 </h3>
    <div class="callct">
      <div class="top">
        <a href="javascript:;" style="margin-right: 30px" :class="select==0?'select':''" @mouseover="qhs(0)">业务来电信息</a>
        <a href="javascript:;" style="margin-right: 30px" :class="select==2?'select':''" @mouseover="qhs(2)">资质来电信息</a>
        <a href="javascript:;" :class="select==1?'select':''" @mouseover="qhs(1)">我兑换的信息</a>
      </div>
      <div class="ct">
        <table>
          <tr class="tr1">
            <th class="th1">序号</th>
            <th class="th2">{{select==2?'资质类型':'业务名称'}}</th>
            <th :style="select==2?'width:219px':'width:100px'">{{select==2?'资质专业':'客户姓名'}}</th>
            <th :style="select==2?'width:150px':'width:100px'">{{select==2?'资质等级':'联系方式'}}</th>
            <th class="th5" :style="select==2?'width:120px':''">{{select==2?'电话':'详情描述'}}</th>
            <th class="th6">提交时间</th>
            <th :style="select==0?'':'display:none'" style="width:90px">业务员</th>
            <th class="th7" :style="select==1?'display:none':''">{{select==2?'状态':'操作'}}</th>
            <th class="th7" :style="select==1?'':'display:none'">{{select==2?'状态':'操作'}}</th>
          </tr>
          <tr v-for="(data,id) in dingdan.slice(sl3*10,(sl3+1)*10)" :key="id">
            <!--v-for="(data,id) in dingdan.showNumOrderRes?dingdan.showNumOrderRes.slice(sl3*10,(sl3+1)*10):[]" :key="id">-->
            <td class="th1 td1">{{id+1}}</td>
            <td class="th2 td2">{{data.servicename}}</td>
            <td class="th3 td3">{{data.username}}</td>
            <td class="th4 td4">{{data.telphone}}</td>
            <td class="th5 td5">{{data.content?data.content:'无详情描述'}}</td>
            <td class="th6 td6">{{data.createtime}}</td>
            <td :style="select==0?'':'display:none'">{{data.serviceusername}}</td>
            <td class="th7 td7" :style="select==1?'display:none':''"><a href="javascript:;" @click="data.readstatus==1?lingqu(data.id):''" :style="data.readstatus==1?'':'background:gray;cursor:default'">{{data.readstatus==1?'积分兑换':'已兑换'}}</a></td>
            <td class="th7 td7" :style="select==1?'':'display:none'"><a href="javascript:;" @click="tuihuan(data.id)">退还</a></td>
          </tr>
        </table>
        <div class="dba" :style="dingdan==[]||dingdan==null||dingdan==''?'display:none':''" style="text-align: center; padding-bottom: 20px;margin-top: 30px">
          <a href="javascript:;" class="syy" @click="syy">上一页</a>
          <a href="javascript:;" v-for="(i,id) in sl2" @click="qh2(id)" :class="id==sl3?'select':''">{{i}}</a>
          <a href="javascript:;" class="xyy" @click="xyy">下一页</a>
        </div>
        <div class="no-ct" :style="dingdan==[]||dingdan==null||dingdan==''?'':'display:none'">
          <div></div>
        </div>
      </div>
    </div>
    <div class="tc">
      <span>×</span>
      {{tcmsg}}
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        title:null,
        select:0,
        sl3:0,
        tcmsg:'',
        sl2:[1],
        dingdan:[],
      }
    },
    async asyncData ({req,params}){
    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
    let all = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/allFormSubmitData?userid=`+cookie);
    let me = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/myFormSubmitData?userid=`+cookie);
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let data  = {nav:nh.data,id:cookie,gr:gr.data,all:all.data,me:me.data};
    return { title: data}
  },
  mounted:function(){
    $('.tbnava1').addClass('select');
    if(this.$route.query.name == 'all'){
      this.dingdan = this.title.all;
      this.select=0;
      this.sl2 = [1];
      let nb = Math.ceil(this.title.all?this.title.all.length/10:1);
      for (let i=1;i<= nb;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $('.hh-grzx .left  li').removeClass('select');
      $('.hh-grzx .left .div6 .li1').addClass('select');
    }else if(this.$route.query.name == 'me'){
      this.dingdan = this.title.me;
      this.select=1;
      this.sl2 = [1];
      let nb = Math.ceil(this.title.me?this.title.me.length/10:1);
      for (let i=1;i<= nb;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $('.hh-grzx .left  li').removeClass('select');
      $('.hh-grzx .left .div6 .li2').addClass('select');
    }else if(this.$route.query.name == 'qualification'){
      this.dingdan = [];
      this.select=2;
      this.sl2 = [1];
      let nb = 0;
      for (let i=1;i<= nb;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $('.hh-grzx .left  li').removeClass('select');
      $('.hh-grzx .left .div6 .li3').addClass('select');
    }
    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    if(this.title.gr == 'go_signin'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gr == 'userid_error'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gr == 'userinfo_is_null'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gr == 'userinfo_banuse'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }
    else if(this.title.gr == 'serviceid_is_null'){
      window.open('/Mall',_self);
    } else if(this.title.gr == 'serviceid_error'){
      window.open('/Mall',_self);
    }else if(this.title.gr == 'serviceinfo_is_null'){
      window.open('/Mall',_self);
    }else if(this.title.gr == 'serviceinfo_banuse'){
      window.open('/Mall',_self);
    }

    $(document).ready(function(){
      $('.hh-zssc .sct li').hover(function(){
        $(this).siblings().removeClass('select');
        $(this).addClass('select');
      });

    })
  },
  watch:{
    "$route": function(){
      //路由变化会触发
      if(this.$route.query.name == 'all'){
        this.dingdan = this.title.all;
        this.select = 0;
        this.sl2 = [1];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li1').addClass('select');
        let nb = Math.ceil(this.title.all?this.title.all.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'me'){
        this.dingdan = this.title.me;
        this.select = 1;
        this.sl2 = [1];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li2').addClass('select');
        let nb = Math.ceil(this.title.me?this.title.me.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
      else if(this.$route.query.name == 'qualification'){
        this.dingdan = [];
        this.select = 2;
        this.sl2 = [1];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li3').addClass('select');
        let nb =0;
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
    }
  },
  methods:{
    tc:function(e1,e2,e3){
      var d = new Date();
      d.setTime(d.getTime()+(e3*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = e1 + "=" + e2 + "; " + expires;
      this.$router.push('/');
    },
    lingqu:function(e){
      var _this = this;
      if(confirm('确定兑换吗')){
        _this.$axios.post('api/PInterface/UserCenter/receiveFormSubmitInfo','userid='+_this.title.id+'&fsid='+e
        )
          .then(function(response){
            if(response.data == 'fsid_is_null'){
              _this.tcmsg =='ID不存在';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);
            }else if(response.data == 'fsid_error'){
              _this.tcmsg =='ID错误';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);

            }else if(response.data == 'formsubmitInfo_is_null'){
              _this.tcmsg =='数据未找到';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);
            }else if(response.data == 'formsubmitInfo_banuse'){
              _this.tcmsg =='数据已被禁用';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);
            }else{
              _this.tcmsg =response.data;
              $('.hh-login .tc').addClass('select');
              _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/allFormSubmitData?userid='+_this.title.id)
                .then(function(response){
                  _this.title.all = response.data;
                  if(_this.$route.query.name == 'all'){
                    _this.dingdan = _this.title.all

                  }else if(_this.$route.query.name == 'me'){
                    _this.dingdan = _this.title.me;
                  }
                });
              _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/myFormSubmitData?userid='+_this.title.id)
                .then(function(response){
                  _this.title.me = response.data;
                  if(_this.$route.query.name == 'all'){
                    _this.dingdan = _this.title.all
                  }else if(_this.$route.query.name == 'me'){
                    _this.dingdan = _this.title.me;
                  }

                });
              $('.tc').fadeIn(0);
              $('.tc').fadeOut(2000);
              setTimeout(function(){//your codes
                window.location.reload()
              },500);
            }


          });
      }


    },
    tuihuan:function(e){
      var _this = this;
      _this.$axios.post('api/PInterface/UserCenter/returnFormSubmitInfo','userid='+_this.title.id+'&fsid='+e
      )
        .then(function(response) {

          _this.tcmsg = response.data;
          $('.hh-login .tc').addClass('select');
          $('.tc').fadeIn(0);
          $('.tc').fadeOut(2000);
          setTimeout(function(){//your codes
            window.location.reload()
          },500);
        });


    },
    qhs:function(e){
      this.select = e;
      if(e ==0){
        this.dingdan = this.title.all;
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li1').addClass('select');
        this.sl2 = [1];
        let nb = Math.ceil(this.title.all?this.title.all.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(e == 1){
        this.dingdan = this.title.me;
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li2').addClass('select');
        this.sl2 = [1];
        let nb = Math.ceil(this.title.me?this.title.me.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
      else if(e == 2){
        this.dingdan = [];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li3').addClass('select');
        this.sl2 = [1];
        let nb = 0;
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
    },
    syy:function(){
      if(this.sl3>0){
        this.sl3 = this.sl3-1;
      }
    },
    xyy:function(){
      var nb =  Math.ceil(this.dingdan?this.dingdan.length/10:0);
      if(this.sl3<nb-1){
        this.sl3= this.sl3+1;
      }
    },
    qh2:function(e){
      this.sl3= e;

    }
  }
  }
</script>

<style>

</style>
